<template>
	<el-container class="main">
		<el-header class="flex items-center">
			<Header @showPreview="showPreviewHandle"></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Shape></Shape>
			</el-aside>
			<el-main class="panel-content">
				<div class="ruler-main">
					<Ruler ref="rulerX" el="rulerX" :scrollOffset="offsetLeft"> </Ruler>
					<Ruler
						ref="rulerY"
						el="rulerY"
						direction="Y"
						:scrollOffset="offsetTop"
					>
					</Ruler>
				</div>
				<div class="content" @scroll="scrollHandle">
					<div id="topology" style="height: 5000px; width: 5000px"></div>
				</div>
			</el-main>
			<el-aside width="260px">
				<InfoBar></InfoBar>
			</el-aside>
		</el-container>
	</el-container>
	<Preview v-model:show="showPreview"></Preview>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { Options, Pen, Topology } from "@topology/core";
import { activityDiagram } from "@topology/activity-diagram";
import { classPens } from "@topology/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@topology/sequence-diagram";
import useCurComponent from "@/src/store/component";
import useTopology from "@/src/store/topology";
import useCommon from '@/src/store/common';
import Header from "@/src/components/Header.vue";
import Shape from "../components/Shape.vue";
import Ruler from "../components/Ruler.vue";
import InfoBar from "../components/InfoBar/index.vue";
import Preview from '@/src/components/Preview.vue'
const curComponentStore = useCurComponent();
const topologyStore = useTopology();
const commonStore = useCommon()
const topologyOptions: Options = {
	grid: true, //显示网格
	rule: false, //显示标尺
	gridSize: 5, //网格大小
	minScale: 0.5,
	maxScale: 2,
	scroll: false,
	disableScale: true,
	disableAnchor: true, //禁止设置锚点
	disableRotate: true, //禁止旋转
};
const { topology } = storeToRefs(topologyStore);
const offsetLeft = ref(0); // 滚动左偏移量
const offsetTop = ref(0); // 滚动上偏移量
const showPreview = ref(false);
onMounted(() => {
	const createTopology = new Topology("topology", topologyOptions);
	createTopology.register(activityDiagram());
	createTopology.register(classPens());
	createTopology.register(sequencePens());
	createTopology.registerCanvasDraw(sequencePensbyCtx());
	// 选中节点
	createTopology.on("active", updateComponentHandle);
	// 取消选中
	createTopology.on("inactive", updateComponentHandle);
	// 监听文本变化
	createTopology.on("input", updateComponentTextHandle);
	// 监听节点大小变化
	createTopology.on("resizePens", updateComponentHandle);
	topologyStore.topology = createTopology;

});
onUnmounted(() => {
	if (topology.value) {
		topology.value.off("active", updateComponentHandle);
		topology.value.off("inactive", updateComponentHandle);
		topology.value.off("input", updateComponentTextHandle);
		topology.value.off("resizePens", updateComponentHandle);
		topology.value.destroy();
	}
});
// 改变组件大小 选中组件
function updateComponentHandle(data: Pen[]) {
	data.forEach((componentItem) => {
		const { id, x = 0, y = 0 } = componentItem;
		componentItem.x = x > 0 ? x : 0;
		componentItem.y = y > 0 ? y : 0;
		topology.value?.setValue(
			{ id, x: componentItem.x / commonStore.getScaleRatio, y: componentItem.y / commonStore.getScaleRatio },
			{ render: true }
		);
	});
	curComponentStore.changeCurComponent(data);
}
// 改变组件文本
function updateComponentTextHandle(data: { pen: Pen; text: string }) {
	const updateText = data.pen?.calculative?.canvas?.inputDiv.innerText;
	const curComponent = { ...data.pen, text: updateText };
	curComponentStore.changeCurComponent([curComponent]);
}

// 滚动监听
function scrollHandle(e: Event) {
	const { scrollLeft, scrollTop } = e.target as HTMLDivElement;
	offsetLeft.value = scrollLeft;
	offsetTop.value = scrollTop;
}

// 打开预览
function showPreviewHandle() {
	showPreview.value = true
}
</script>
<style lang="less" scoped>
.main {
	height: 100vh;
	width: 100vw;
}
.panel-content {
	flex: 1;
	display: flex;
	overflow: hidden;
	position: relative;
	padding: 1px;

	.ruler-main {
		// position: relative;
		.ruler-wrap {
			position: absolute;
			z-index: 100;
		}
		#rulerX {
			margin-left: 30px;
		}
	}
	.content {
		height: calc(100vh - 100px);
		flex: 1;
		margin: 30px 0 0 30px;
		overflow: auto;
	}
}
</style>
